<template>
  <el-card shadow="never" :style="{height:cardH}">
    <div slot="header" class="clearfix fs-15">
      <span class="fw-b">近期单据情况</span>
    </div>
    <ul>
      <li v-for="item in list" :key="item.billId" class="d-flex mb-30">
        <span class="mr-5">></span>
        <p class="title text-hidden mr-30">
          <router-link
            :to="{name:'BillDetail',params:{billId : item.billId, billTempId : item.formTmplId}}"
          >
            <el-link type="primary">{{item.billName}}</el-link>
          </router-link>
        </p>
        <span class="mr-30 flex__item">分类：{{item.categoryName}}</span>
        <!-- <span>2019-09-10 至 2020-01-13</span> -->
        <span class="tr">
          <template v-if="item.state!=undefined&&item.state!=-1">
            <el-link
              :type="billState[item.state].type"
              :underline="false"
            >{{billState[item.state].name}}</el-link>
          </template>
        </span>
      </li>
    </ul>
  </el-card>
</template>

<script>
import { mapGetters } from "vuex";
import { getLatestBillList } from "api/home";
export default {
  props: ["cardH"],
  data() {
    return {
      list: []
    };
  },
  computed: {
    ...mapGetters(["billState"])
  },
  created() {
    console.log(this.billState, "billState");
    this.loadData();
  },
  methods: {
    loadData() {
      getLatestBillList()
        .then(res => {
          this.list = res.data;
        })
        .catch(err => {
          console.log(err, "xxx");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "styles/variables.scss";

ul {
  li {
    span {
      color: $fontGray;
      flex-shrink: 0;
    }
    .title {
      width: 65%;
    }
  }
}
</style>
